<template>
	<view class="container">
		<u-navbar title='编辑成员资料' :title-bold='true' :border-bottom='false'></u-navbar>

		<view class="main">
			<p>基本信息</p>
			<view class="card">
				<span class="lable">姓名</span>
				<input v-model="detail.username" type="text" placeholder="请输入姓名">
			</view>
			<u-line></u-line>
			<!-- <view class="card">
				<span :style="isMobile?'':'color:red;'" class="lable">{{isMobile?"":"*"}}联系电话</span>
				<input @blur="rule" v-model="detail.mobile" type="text" placeholder="请输入电话号码">
			</view> -->
			<u-line></u-line>
			<view class="card" @click="chooseTime(1)">
				<span class="lable">出生日期</span>
				<view class="choose">
					<input disabled v-model="detail.birthday" type="text" placeholder="请选择">
					<u-icon name="arrow-right" color="#c0c4cc" size="20"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="card">
				<span class="lable">年龄</span>
				<view class="choose">
					{{detail.age?detail.age:'--'}}
				</view>
			</view>
			<u-line></u-line>
			<view class="card" @click="choose(2)">
				<span class="lable">性别</span>
				<view class="choose">
					<input disabled v-model="detail.gender_text" type="text" placeholder="请选择">
					<u-icon name="arrow-right" color="#c0c4cc" size="20"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="card" @click="choose(3)">
				<span class="lable">关系</span>
				<view class="choose">
					<input disabled v-model="detail.relations_text" type="text" placeholder="请选择">
					<u-icon name="arrow-right" color="#c0c4cc" size="20"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<p class="p">更多信息</p>
			<view class="card">
				<span class="lable">身高cm</span>
				<input @blur="rule" v-model="detail.height" type="text" placeholder="请输入身高">
			</view>
			<u-line></u-line>
			<view class="card">
				<span class="lable">体重kg</span>
				<input @blur="rule" v-model="detail.weight" type="text" placeholder="请输入体重">
			</view>
			<u-line></u-line>
			<view class="card">
				<span class="lable">BMI</span>
				<view class="choose">
					{{detail.bmi||'--'}}
				</view>
			</view>
			<u-line></u-line>
			<view class="card" @click="choose(4)">
				<span class="lable">学历</span>
				<view class="choose">
					<input disabled v-model="detail.education_text" type="text" placeholder="请选择">
					<u-icon name="arrow-right" color="#c0c4cc" size="20"></u-icon>
				</view>
			</view>
		</view>

		<view class="btn" @click="submit">确定</view>

		<u-select v-model="show" :list="list" @confirm="confirm()"></u-select>
		<u-picker v-model="picker" :endYear='startTime' @confirm="confirmPicker()" :mode="mode"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		memberDetail,
		addMember
	} from '@/api/index.js'
	export default {
		data() {
			return {
				show: false,
				picker: false,
				mode: 'time',
				list: [],
				age: [],
				gender: [],
				relations: [],
				education: [],
				detail: {},
				idx: -1,
				isMobile: true,
				startTime: new Date().getFullYear()
			}
		},
		watch: {
			"detail.height"(newData) {
				this.detail.bmi = ''
				if (this.detail.weight && newData) {
					this.detail.bmi = this.detail.weight / ((newData / 100) * (newData / 100))
					this.detail.bmi = this.detail.bmi.toFixed(2)
				}

			},
			"detail.weight"(newData) {
				this.detail.bmi = ''
				if (this.detail.height && newData) {
					this.detail.bmi = newData / ((this.detail.height / 100) * (this.detail.height / 100))
					this.detail.bmi = this.detail.bmi.toFixed(2)
				}

			}
		},
		onLoad(e) {
			this.init(e.id)
		},
		methods: {
			init(id) {
				const that = this
				for (let i = 8; i <= 18; i++) {
					that.age.push({
						value: i,
						label: i
					})
				}

				if (id != 'undefined' && id) {
					memberDetail({
						'id': id
					}).then(res => {

						if (res && res.code == 1) {
							that.detail = res.data.detail || {};
							that.gender = Object.keys(res.data.gender).map(key => ({
								value: key,
								label: res.data.gender[key]
							}));
							that.relations = Object.keys(res.data.relations).map(key => ({
								value: key,
								label: res.data.relations[key]
							}));
							that.education = Object.keys(res.data.education).map(key => ({
								value: key,
								label: res.data.education[key]
							}));
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			// picker选择器 
			chooseTime(e) {
				this.picker = true;
				this.idx = e;
				switch (e) {
					case 1:
						this.mode = 'time';
						break;
					case 2:
						this.mode = 'time';
						break;
					case 3:
						this.mode = 'time';
						break;
				}
			},
			// 计算年纪
			calculateAge(y, m, d) {
				var today = new Date();
				var age = today.getFullYear() - y;
				var month = today.getMonth() - m + 1;
				if (month < 0 || (month === 0 && today.getDate() < d)) {
					age--;
				}
				age = age + '岁'
				if (month > 0) {
					age = age + month + '个月'
				} else {
					age = age + (12 + month) + '个月'
				}
				return age;
			},
			confirmPicker(e) {
				switch (this.idx) {
					case 1: {
						let str = e.year + '-' + e.month + '-' + e.day
						this.detail.birthday = str
						this.detail.age = this.calculateAge(Number(e.year), Number(e.month), Number(e.day))
					};
					break;
					case 2:
						this.detail.gender_text = e[0].label;
						this.detail.gender = e[0].value;
						break;
					case 3:
						this.detail.relations_text = e[0].label;
						this.detail.relations = e[0].value;
						break;
				}
			},
			// 下拉列 start
			choose(e) {
				this.show = true;
				this.idx = e;
				switch (e) {
					case 1:
						this.list = this.age;
						break;
					case 2:
						this.list = this.gender;
						break;
					case 3:
						this.list = this.relations;
						break;
					case 4:
						this.list = this.education;
						break;
				}
			},
			confirm(e) {
				switch (this.idx) {
					case 1:
						this.detail.age = e[0].label;
						break;
					case 2:
						this.detail.gender_text = e[0].label;
						this.detail.gender = e[0].value;
						break;
					case 3:
						this.detail.relations_text = e[0].label;
						this.detail.relations = e[0].value;
						break;
					case 4:
						this.detail.education_text = e[0].label;
						this.detail.education = e[0].value;
						break;
				}
				// console.log(this.detail);
			},
			// 下拉列end
			submit() {
				let that = this
				if (that.isMobile && that.detail.username) {
					addMember(that.detail).then(res => {
						if (res.code == 1) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							console.log(res.msg);
							that.$refs.uToast.show({
								title: res.msg
							})
						}
					})
				} else {
					uni.showToast({
						title: '请完善表单!',
						icon: 'none'
					})
				}
			},
			rule() {
				if (this.detail.mobile) this.isMobile = this.ws.isMobile(this.detail.mobile)
				if (this.detail.height && this.detail.weight && this.isw && this.ish) {
					// BMI=体重kg/身高^2 (m)
					let h = this.detail.height / 100
					let bmi = this.detail.weight / (h * h);
					this.detail.bmi = bmi.toFixed(2)
				}
			}

		}
	}
</script>

<style lang="less">
	.container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 80px;

		.onFous {
			text-align: left;
		}

		.main {
			padding: 30rpx;

			p {
				font-size: 13px;
				line-height: 18px;
				color: #6EC9E1;
			}

			.p {
				margin-top: 30px;
			}

			.card {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;
				margin-bottom: 20rpx;

				input {
					width: 60vw;
					text-align: right;
				}

				.choose {
					display: flex;
				}

			}
		}

		.btn {
			position: fixed;
			width: 100%;
			bottom: 0%;
			left: 0%;
			height: 60px;
			background-color: #6EC9E1;
			line-height: 60px;
			text-align: center;
			color: #FFF;
			z-index: 999;
		}

	}
</style>